<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 自动识别最新稳定版的Vue.js  -->
    <script src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body xmlns:v-on="http://www.w3.org/1999/xhtml">
<div id="app">

    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="150">
            </el-table-column>
            <el-table-column label="配送信息">
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column label="地址">
                    <el-table-column
                            prop="province"
                            label="省份"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="市区"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                </el-table-column>
            </el-table-column>
        </el-table>
    </template>

<!--    <script>-->
<!--        export default {-->
<!--            data() {-->
<!--                return {-->
<!--                    tableData: [{-->
<!--                        date: '2016-05-03',-->
<!--                        name: '王小虎',-->
<!--                        province: '上海',-->
<!--                        city: '普陀区',-->
<!--                        address: '上海市普陀区金沙江路 1518 弄',-->
<!--                        zip: 200333-->
<!--                    }, {-->
<!--                        date: '2016-05-02',-->
<!--                        name: '王小虎',-->
<!--                        province: '上海',-->
<!--                        city: '普陀区',-->
<!--                        address: '上海市普陀区金沙江路 1518 弄',-->
<!--                        zip: 200333-->
<!--                    }, {-->
<!--                        date: '2016-05-04',-->
<!--                        name: '王小虎',-->
<!--                        province: '上海',-->
<!--                        city: '普陀区',-->
<!--                        address: '上海市普陀区金沙江路 1518 弄',-->
<!--                        zip: 200333-->
<!--                    }, {-->
<!--                        date: '2016-05-01',-->
<!--                        name: '王小虎',-->
<!--                        province: '上海',-->
<!--                        city: '普陀区',-->
<!--                        address: '上海市普陀区金沙江路 1518 弄',-->
<!--                        zip: 200333-->
<!--                    }, {-->
<!--                        date: '2016-05-08',-->
<!--                        name: '王小虎',-->
<!--                        province: '上海',-->
<!--                        city: '普陀区',-->
<!--                        address: '上海市普陀区金沙江路 1518 弄',-->
<!--                        zip: 200333-->
<!--                    }, {-->
<!--                        date: '2016-05-06',-->
<!--                        name: '王小虎',-->
<!--                        province: '上海',-->
<!--                        city: '普陀区',-->
<!--                        address: '上海市普陀区金沙江路 1518 弄',-->
<!--                        zip: 200333-->
<!--                    }, {-->
<!--                        date: '2016-05-07',-->
<!--                        name: '王小虎',-->
<!--                        province: '上海',-->
<!--                        city: '普陀区',-->
<!--                        address: '上海市普陀区金沙江路 1518 弄',-->
<!--                        zip: 200333-->
<!--                    }]-->
<!--                }-->
<!--            }-->
<!--        }-->
<!--    </script>-->
</div>
</body>
<script>
    /*必须有vue*/
    new Vue({
        el:'#app',
        data:{
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-08',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-06',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }]
        }
    })
</script>
</html>